<template>
  <div class="item_center">
    <div class="box_size">
      <div>
        <div>
          当前分类：{{ skuSearchDto.searchValue }}
        </div>
        <div>
          筛选条件
        </div>
        <div style="background-color: rgba(170,166,166,0.16);padding: 10px">
          <el-row>
            <el-col>
              价格区间
              <el-input-number v-model="skuSearchDto.minPrice" :min="0"/>
              -
              <el-input-number v-model="skuSearchDto.maxPrice" :min="0"/>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="1">
           <span style="background-color: rgba(2,31,40,0.24)">
             品牌
           </span>
            </el-col>
            <el-col v-for="item in skuSearchVo?.brands" span="4" :key="item.id">
              <el-image style="width: 40px;height: 40px" :src="$img+item.logo"></el-image>
              <!--          {{item.name}}-->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="1">
          <span style="background-color: rgba(2,31,40,0.24)">
            排序
          </span>
            </el-col>
            <el-col :span="0.1" @click="skuSearchDto.sortManner=-1"
                    :class="skuSearchDto.sortManner===-1 ? 'active_class': ''">
              综合
            </el-col>
            <el-col @click="skuSearchDto.sortManner=0" :span="0.1"
                    :class="skuSearchDto.sortManner===0 ? 'active_class': ''">
              价格
            </el-col>
            <el-col :span="0.1" @click="skuSearchDto.sortManner=1"
                    :class="skuSearchDto.sortManner===1 ? 'active_class': ''">
              上架时间
            </el-col>
            <el-col :span="0.1" @click="skuSearchDto.sortManner=2"
                    :class="skuSearchDto.sortManner===2 ? 'active_class': ''">
              销量
            </el-col>
            <el-col :span="0.1">
              <el-image :src="require('@/assets/icon/asc.png')" style="height: 25px;width: 25px"
                        v-show="skuSearchDto.sortState===0" @click="skuSearchDto.sortState=1"/>
              <el-image :src="require('@/assets/icon/desc.png')" style="height: 25px;width: 25px"
                        v-show="skuSearchDto.sortState===1" @click="skuSearchDto.sortState=0"/>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="0.1">
              <button style="width: 100px" @click="resetData">重置</button>
            </el-col>
            <el-col :span="0.1">
              <button style="width: 100px" @click="getUpSkuList">过滤</button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div style="margin-top: 30px;">
        <el-skeleton :loading="loading" animated>
          <template #default>
            <div v-if="skuSearchVo.skuListModels.length>0">
              <el-row :gutter="20">
                <el-col v-for="item in skuSearchVo.skuListModels" :span="6" style="margin-top: 10px"
                        @click="toDetail(item.skuId)">
                  <sku-card :sku-info="item"></sku-card>
                </el-col>
              </el-row>
              <el-divider style="margin-top: 10px"/>
              <div style="display: flex;justify-content: end">
                <el-pagination hide-on-single-page background layout="prev, pager, next"
                               v-model:current-page="skuSearchDto.pageNum"
                               v-model:page-size="skuSearchDto.pageSize" :total="skuSearchDto.totals"/>
              </div>
            </div>
            <div v-else>
              <no-data></no-data>
            </div>
          </template>
          <!--      骨架屏-->
          <template #template>
            <el-row justify="space-evenly" v-for="i in 2" :key="i">
              <el-col
                  v-for="(item) in 4"
                  :key="item"
                  :span="5"
              >
                <div class="commodity_item_box">
                  <el-skeleton-item variant="image" style="width: 100%;height: 250px"/>
                  <div style="margin-top: 20px">
                    <el-skeleton-item variant="text" style="width: 50%;height: 20px"/>
                    <el-skeleton-item variant="text" style="width: 100%;height: 20px"/>
                  </div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-skeleton>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {useRouter, useRoute} from "vue-router";
import {getSkuListFromES} from "@/api/goods";
import SkuCard from "@/components/commodity/SkuCard";
import {Picture as IconPicture} from '@element-plus/icons-vue'
import NoData from "@/components/common/NoData";

let router = useRouter()
let route = useRoute()
let loading = ref(true)

let skuSearchDto = reactive({
  searchValue: "",
  pageNum: 1,
  pageSize: 20,
  totals: 0,
  categoryIds: route.query.categoryId,
  // categoryName: route.query.categoryName,
  sortState: 0,//排序规则：0升序
  sortManner: -1,//排序方式：-1:默认（不排序）;0:价格排序,1:上架时间;
  minPrice: 0,
  maxPrice: 0,
  state: 0,
})
let skuSearchVo = ref()

function toDetail(skuId) {
  router.push({
    path: '/home/commodity-detail',
    query: {
      skuId: skuId
    }
  })
}

function getUpSkuList() {
  getSkuListFromES(skuSearchDto).then(res => {
    skuSearchVo.value = res.data
    loading.value = false
  })
}

/**
 * 重置过滤条件
 */
function resetData() {
  skuSearchDto.sortState = 0
  skuSearchDto.sortManner = -1
  skuSearchDto.minPrice = 0
  skuSearchDto.maxPrice = 0
}

watch(() => route.query.searchValue, () => {
  skuSearchDto.searchValue = route.query.searchValue
  getUpSkuList()
})
onMounted(() => {
  skuSearchDto.searchValue = route.query.searchValue
  getUpSkuList()
})
</script>

<style scoped>
.item_center {
  display: flex;
  justify-content: center;
}

.box_size {
  width: 1200px;
}

.search_img {
  width: 30px;
  height: 30px;
  margin-left: 20px;
  margin-top: 10px;
}

.active_class {
  background-color: red;
}
</style>
